﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Log in</title>
    <script type="text/javascript" src="../scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="../scripts/mKook.js"></script>
    <script type='text/javascript' src='../scripts/knockout-2.1.0.js'></script>
    <script type='text/javascript' src='../scripts/jquery.mobile-1.2.0-pre.js'></script>
    <link href="../Content/jquery.mobile-1.2.0-pre.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1 data-bind="text: userName">Login form</h1>
        </div>
        <div data-role="content">
            <p>Please enter your user name and password.</p>
            <form id="loginForm" name="loginForm" action="">
            <ul data-role="listview" data-inset="true">
                <li data-role="fieldcontain">
                    <label for="UserName" style="height: 100%; vertical-align: middle">Username</label>
                    <input data-bind="value: userName" id="UserName" name="UserName" type="text" />
                </li>
                <li data-role="fieldcontain">
                    <label for="Password" style="height: 100%; vertical-align: middle">Password</label>
                    <input data-val="true" id="Password" name="Password" type="password" />
                </li>
                <li data-role="fieldcontain">
                    <label for="RememberMe">Remember me?</label>
                    <input data-bind="checked: isRememberMe" id="RememberMe" name="RememberMe" type="checkbox" />
                </li>
                <li data-role="fieldcontain">
                    <button data-bind="click: Login" id="btnLogin" name="btnLogin">Log in</button>
                </li>
            </ul>
            <div data-bind="visible: error().length > 0">
                <p><strong data-bind="text: error" style="color: Red"></strong></p>
            </div>
            </form>
        </div>
        <div data-role="footer">
            <p style="font-size: 10px; margin: 10px">© 2012 Danfoss and other contributors</p>
        </div>
    </div>
    <script type="text/javascript">
        function Login() {
            $("#loginForm").validate(
            {
                rules: {
                    UserName: { required: true },
                    Password: { required: true }
                },
                messages: {
                    UserName: "Username is required",
                    Password: "Password is required"
                }
            });
            $("#loginForm").valid();
        }

        function AuthViewModel() {
            this.userName = ko.observable("Bert");
            this.error = ko.observable("");
            this.isRememberMe = ko.observable(true);
        }

        ko.applyBindings(new AuthViewModel());
    </script>
</body>
</html>
